import React, { useState, useCallback, memo } from "react";

// 按钮函数式组件
const HYButton = memo((props) => {
  console.log("HYButton重新渲染", props.title);

  return <button onClick={props.increment}>HYButton +1</button>;
});

export default function CallbackHookDemo02() {
  console.log("CalLbackHookDemo02重新渲染");

  const [count, setCount] = useState(0);
  const [show, setShow] = useState(true);

  const increment1 = () => {
    //函数每一次都重新定义
    console.log("执行函数");
    setCount(count + 1);
  };

  //   这种方式没有任何性能优化
  const increment2 = useCallback(() => {
    console.log("执行函数");
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <h2>CallbackHookDemo01</h2>
      <h2>计数: {count}</h2>
      {/* <button onClick={increment1}>+1</button>
      <button onClick={increment2}>+1</button> */}
      <HYButton title="btn1" increment={increment1} />
      <HYButton title="btn2" increment={increment2} />

      <button onClick={(e) => setShow(!show)}>切换</button>
    </div>
  );
}
